<ion-content scroll="false" class="setup-page">
  <ion-slides  options="vm.sliderOptions" slider="data.slider">

    <ion-slide-page class="setup-slide-content slide-welcome">
      <div class="setup-logo-wrapper setup-slide-content-push">
        <img src="img/logo.png" alt="streama" class="setup-logo">
      </div>

      <div class="setup-foot">
        <button ng-click="vm.proceedToSlide(1)" class="button button-light button-full button-outline">Welcome <i class="ion-chevron-right"></i></button>
      </div>
    </ion-slide-page>


    <ion-slide-page class="setup-slide-content">

      <h2>Installation Setup</h2>

      <div class="setup-slide-content-push">
        <form class="setup-installation-wrapper">
          <label>Streama-Server Domain</label>
          <i class="ion-help-circled pull-right" ng-click="vm.toggleHelp('domain')"></i>

          <div class="list">
            <label class="item item-input">
              <i class="icon ion-earth placeholder-icon"></i>
              <input type="url" placeholder="e.g. https://yourStreama.com" ng-model="vm.setup.domain">
            </label>
          </div>


          <button style="display: none;" type="submit" ng-click="vm.validateDomain(vm.setup.domain)">Submit</button>


        </form>


        <div class="setup-help help-domain" ng-if="vm.helpForDomain">
          <h4><i class="ion-ios-help-outline"></i> Help</h4>
          <p>You need to enter a URL to a Streama installation. Upon proceeding, the app will validate and authorize itself against that installation.</p>
        </div>
      </div>

      <div class="setup-foot">
        <button ng-click="vm.validateDomain(vm.setup.domain)" ng-disabled="!vm.setup.domain"
              class="button button-dark button-full ">Proceed to Login <i class="ion-chevron-right"></i></button>
      </div>

    </ion-slide-page>


    <ion-slide-page class="setup-slide-content">
      <div class="streama-header">
        <img src="img/logo.png" alt="streama" class="header-logo">
      </div>
      <h2 ng-if="!vm.isAlreadySetUp"><i ng-click="vm.proceedToSlide(1)" class="ion-chevron-left"></i>&nbsp; Authorization</h2>

      <div class="setup-slide-content-push">


        <button ng-click="vm.proceedToSlide(1)" class="button button-light button-outline button-small pull-right">
          Change Connection
        </button>

        <div class="setup-installation-wrapper">
          <h5>Connecting to: <strong>{{ vm.setup.domain }}</strong></h5>

          <form class="list" ng-submit="vm.login()">
            <label class="item item-input">
              <i class="icon ion-ios-person placeholder-icon"></i>
              <input name="username" type="text" placeholder="Username" ng-model="vm.setup.username" ng-keypress="($event.charCode==13)? vm.login() : return">
            </label>
            <label class="item item-input">
              <i class="icon ion-key placeholder-icon"></i>
              <input name="password" type="password" placeholder="Password" ng-model="vm.setup.password" ng-keypress="($event.charCode==13)? vm.login() : return">
            </label>

            <button style="display: none;" type="button" ng-click="vm.login()">Submit</button>
          </form>

        </div>


        <div class="setup-help help-domain" ng-if="vm.helpForDomain">
          <h4><i class="ion-ios-help-outline"></i> Help</h4>
          <p>You need to enter a URL to a Streama installation. Upon proceeding, the app will validate and authorize itself against that installation.</p>
        </div>
      </div>

      <div class="text-center setup-foot setup-login-foot">
        <button ng-click="vm.login()" class="button button-dark button-full">
          Login
        </button>
      </div>
    </ion-slide-page>


  </ion-slides>
</ion-content>
